<template>
    <div class="list-ctr">
        <div class="header">
            <com-search :callback="searchContact" :enterpriseId="cache.defaultEnterprise.enterpriseId"></com-search>
            <com-crumbs :departmentId="$route.params.departmentId"
                        :enterpriseId="cache.defaultEnterprise.enterpriseId"></com-crumbs>
        </div>
        <div class="section">
            <div class="section-container">
                <div class="line"></div>
                <com-item-department :items="departmentItems"></com-item-department>
                <com-item-contact :items="contactItems" :departmentId="$route.params.departmentId"></com-item-contact>
                <div class="no-list" v-if="noList">
                    {{resultType == 1 ? '暂无匹配信息，请更换新的搜索字' : '暂无子部门或联系人'}}
                </div>
            </div>
        </div>
        <div class="footer">
            <com-nav :departmentId="$route.params.departmentId"></com-nav>
        </div>

        <div class="long-press-mask"
             v-if="isShowLongPressMask"
             @click="isShowLongPressMask=!isShowLongPressMask">
            <button class="btn btn-delete"
                    @click="$router.push({name: 'contact_del', params: {departmentId: $route.params.departmentId}})">
                批量删除
            </button>
        </div>

        <com-add-contact :departmentId="$route.params.departmentId"></com-add-contact>
    </div>
</template>

<script>
	import ComSearch from "@/components/search";
	import ComCrumbs from "@/components/crumbs";
	import ComItemDepartment from "@/components/item_department";
	import ComItemContact from "@/components/item_contact";
	import ComNav from "@/components/nav";
	import ComAddContact from "@/components/add_contact";

	export default {

	  	name: 'list',

	  	components: {
	  		ComSearch,
	  		ComCrumbs,
	  		ComItemDepartment,
	  		ComItemContact,
	  		ComNav,
	  		ComAddContact
	  	},

	  	data () {
	    	return {
	    		departmentItems: [],
	    		contactItems: [],
	    		isShowLongPressMask: false,
	    		loading: false,
	    		resultType: 0
	    	};
	  	},

	  	beforeRouteEnter (to, from, next) {
		    next(vm => {});
		},

	  	created () {
	  		let params = this.$route.params;
	  		this.getList(this.cache.defaultEnterprise.enterpriseId, params.departmentId, 0, 100);
	  		fxAPI.api('setAppTitle', {title: '管理部门和联系人'});
	  		this.bus.$on('showLongPressMask', res => {
	  			this.isShowLongPressMask = res;
	  		});
	  	},

	  	computed: {
	  		noList () {
	  			return !this.loading
	  					&&this.departmentItems.length==0
	  					&&this.contactItems.length==0;
	  		}
	  	},

	  	methods: {
	  		getList (enterpriseId, departmentId, offset, rowCount) {
	  			this.loading = true;
	  			this.departmentItems = [];
	  			this.contactItems = [];
	  			Promise.all([
	  				this.getDepartmentList(enterpriseId, departmentId),
	  				this.getContactList(enterpriseId, departmentId, offset, rowCount)
	  			]).then(
	  				res => {
	  					this.loading = false;
	  					this.departmentItems = res[0].data ? res[0].data.list : [];
	  					this.contactItems = res[1].data.contactList||[];
	  				}
	  			);
	  		},

	  		getDepartmentList (enterpriseId, departmentId) {
	  			return new Promise((resolve, reject) => {
	  				this.$http.post(this.api.eab, {
		  				module: 'department',
		  				action: 'getChildDepartments',
		  				enterpriseId: enterpriseId,
		  				departmentId: departmentId
		  			}, {showLoading: true}).then(
		  				res => {
		  					if (res.body.result === 1) {
		  						resolve(res.body);
		  					}
		  				}
		  			);
	  			});
	  		},

	  		getContactList (enterpriseId, departmentId, offset, rowCount) {
	  			return new Promise((resolve, reject) => {
	  				this.$http.post(this.api.eab, {
		  				module: 'department',
		  				action: 'getDepartmentContactList',
		  				enterpriseId: enterpriseId,
		  				departmentId: departmentId,
		  				offset: 0,
		  				rowCount: 100
		  			}, {showLoading: true}).then(
		  				res => {
		  					if (res.body.result === 1) {
		  						resolve(res.body);
		  					}
		  				}
		  			);
	  			});
	  		},

	  		searchContact (enterpriseId, keyword) {
	  			if (!keyword) {
	  				this.getList(this.cache.defaultEnterprise.enterpriseId, this.$route.params.departmentId||0, 0, 1000);
	  			} else {

	  				this.$http.post(this.api.eab, {
			  			module: 'search',
			  			action: 'searchContacts',
			  			enterpriseIds: [enterpriseId],
			  			matchHint: keyword,
			  			rowCount: 1000,
			  			pageIndex: 1
			  		}, {
			  			showLoading: true
			  		}).then(
			  			res => {
			  				if (res.body.result == 1) {
			  					this.departmentItems = [];
			  					this.contactItems = [];
	  							this.resultType = '1';
	  							setTimeout(() => {
	  								this.contactItems = res.body.data.beFoundContacts;
	  							}, 200);
			  				}
			  			}
			  		);
	  				// this.departmentItems = [];
	  				// this.contactItems = [];
	  				// this.resultType = '1';
	  				// this.$toasted.show('暂不支持搜索！')
	  			}

	  		},
	  	},

	  	watch: {
	  		/**
	  		 * 监控路由的变化
	  		 */
	  		$route (a, b) {
	  			this.getList(this.cache.defaultEnterprise.enterpriseId, a.params.departmentId);
	  		}
	  	}
	};
</script>

<style lang="scss" scoped>
    @import '../scss/mixin.scss';

    .list-ctr {
        @include app-top-main-bottom(200px, 100px);
        .section-container {
            background: #fff;
            .line {
                width: 100%;
                height: 20px;
                background: #f5f5f5;
            }
            .no-list {
                width: 100%;
                line-height: 140px;
                font-size: 24px;
                color: #666;
                text-align: center;
            }
        }
        .long-press-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            animation: fadeIn .2s;
            z-index: 1000000;

            .btn {
                position: absolute;
                bottom: 0;
                left: 0;
            }

            @keyframes fadeIn {
                0% {
                    opacity: 0;
                }
                100% {
                    opacity: 1;
                }
            }
        }
    }
</style>
